<template>
	<view>
		<view
			class="customHead"
			:style="{ height: totalHeight + 'px' }"
			v-if="brandData.name"
		>
			<view class="bg">
				<image
					class="bgimg"
					:src="brandData.thumb[0].url"
					mode="aspectFill"
				></image>
			</view>
			<view class="container">
				<view
					class="statusBar"
					:style="{ height: statusBarHeight + 'px' }"
				></view>
				<view
					class="service"
					:style="{ height: titleBarHeight + 'px' }"
					v-if="!foldState"
				></view>
				<view
					class="body"
					:class="foldState ? 'fold' : ''"
					:style="{ height: bodyBarHeight + 'px' }"
				>
					<view
						class="brand"
						@click="clickBrand"
					>
						<view class="pic">
							<image
								class="img"
								:src="brandData.thumb[0].url"
								mode="aspectFill"
							></image>
						</view>
						<view class="text">
							<view class="title">
								<text class="font">{{ brandData.name }}</text>
								<u-icon
									class="icon"
									name="more-circle"
									size="22"
									color="#fff"
								></u-icon>
							</view>
							<view class="desc">{{ brandData.about }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="brandData.name">
			<uni-popup
				ref="brandPopup"
				type="bottom"
			>
				<view class="brandWrapper">
					<view
						class="close"
						@click="closeBrandPop"
					>
						<u-icon
							name="arrow-down"
							color="#666"
						></u-icon>
					</view>

					<view class="brand">
						<view class="pic">
							<image
								class="img"
								:src="brandData.thumb[0].url"
								mode="aspectFill"
							></image>
						</view>
						<view class="title">{{ brandData.name }}</view>
						<view class="des">{{ brandData.about }}</view>
					</view>

					<view class="cell">
						<u-cell-group>
							<u-cell
								icon="phone"
								:title="brandData.mobile"
								isLink
								@click="clickMobile(brandData.mobile)"
							></u-cell>
							<u-cell
								icon="map"
								:title="brandData.address"
								isLink
								@click="clickMap(brandData.address)"
							></u-cell>
						</u-cell-group>
					</view>
				</view>

				<!-- <view class="safe-area-bottom"></view> -->
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex';
export default {
	name: 'custom-head-bar',
	// props: {
	// 	foldState: {
	// 		type: Boolean,
	// 		defaultValue: false
	// 	}
	// },
	data() {
		return {
			// statusBarHeight: 0,
			// titleBarHeight: 0,
		};
	},
	created() {
		// console.log(uniCloud.getCurrentUserInfo().role);
		this.getBrandData();
	},
	mounted() {
		// let systemInfo = uni.getSystemInfoSync();
		// this.statusBarHeight = systemInfo.statusBarHeight || 20;
		// // #ifdef MP-WEIXIN
		// let menuBtnInfo = uni.getMenuButtonBoundingClientRect();
		// this.titleBarHeight = menuBtnInfo.height + (menuBtnInfo.top - this.statusBarHeight) * 2;
		// // #endif
		// // #ifndef MP-WEIXIN
		// this.titleBarHeight = 40;
		// // #endif
	},
	methods: {
		...mapMutations(['set_brand']),
		...mapActions(['getBrandData']),
		clickBrand() {
			this.$refs.brandPopup.open();
		},
		closeBrandPop() {
			this.$refs.brandPopup.close();
		},
		clickMobile(value) {
			// 打电话
			uni.makePhoneCall({
				phoneNumber: value
			});
		},
		clickMap(value) {
			uni.request({
				url: 'https://restapi.amap.com/v3/geocode/geo',
				data: {
					key: '19375a58cd541d66c89dc38fddaff982',
					address: value
				},
				success: (res) => {
					let location = res.data.geocodes[0].location;
					// [经度， 纬度]
					let arr = location.split(',').map((item) => Number(item));
					console.log(arr);
					uni.openLocation({
						longitude: arr[0],
						latitude: arr[1]
					});
				}
			});
		}
	},
	computed: {
		...mapGetters(['statusBarHeight', 'titleBarHeight', 'bodyBarHeight', 'totalHeight', 'foldState', 'brandData']),
		// totalHeight() {
		// 	if (this.foldState) return this.statusBarHeight + this.titleBarHeight + 10;
		// 	return this.statusBarHeight + this.titleBarHeight + 100 + 10;
		// },
		// bodyBarHeight() {
		// 	if (this.foldState) return this.titleBarHeight;
		// 	return 100;
		// }
		manageState() {
			return uniCloud.getCurrentUserInfo().role.includes('manage');
		}
	}
};
</script>

<style lang="scss" scoped>
.customHead {
	height: 400rpx;
	overflow: hidden;
	position: relative;
	.bg {
		width: 100%;
		height: 100%;
		background-color: #000;
		.bgimg {
			width: 100%;
			height: 100%;
			filter: blur(30rpx);
			transform: scale(2);
		}
	}
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		.statusBar {
			// height: var(--status-bar-height);
		}
		.service {
			// border: 1px solid red;
			padding-left: 30rpx;
			@include flex-box-set(start);
			color: #fff;
			.manage {
				margin-left: 20rpx;
				@include flex-box-set(start);
			}
		}
		.body {
			@include flex-box();
			padding: 0 45rpx;
			height: 100px;
			transition: 0.3s;
			// background-color: #fff;
			// border: 1px solid red;
			.brand {
				width: 580rpx;
				@include flex-box-set(start);
				.pic {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					overflow: hidden;
					transition: 0.3s;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					flex: 1;
					padding: 0 30rpx;
					color: #fff;
					.title {
						font-size: 36rpx;
						font-weight: 800;
						@include flex-box-set(start);
						.font {
							margin-right: 10rpx;
						}
					}
					.desc {
						font-size: 26rpx;
						width: 100%;
						opacity: 0.8;
						padding-top: 5rpx;
						@include ellipsis();
					}
				}
			}
			&.fold {
				padding: 0 30rpx;
				.brand {
					.pic {
						width: 60rpx;
						height: 60rpx;
					}
					.text {
						padding-left: 15rpx;
						.title {
							font-size: 28rpx;
							.icon {
								transform: scale(0.9);
							}
						}
						.desc {
							display: none;
						}
					}
				}
			}
		}
	}
}
.brandWrapper {
	padding: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
	background: #fff;
	@include flex-box();
	flex-direction: column;

	.close {
		background: $page-bg-color;
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
	}

	.brand {
		@include flex-box();
		flex-direction: column;
		padding: 30rpx 0;

		.pic {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 34rpx;
			color: $text-font-color-1;
			padding: 10rpx 0;
		}

		.des {
			font-size: 28rpx;
			color: $text-font-color-2;
		}
	}

	.cell {
		width: 100%;
		padding: 30rpx 0 100rpx;
	}
}
</style>
